// 1. 引入Vue和Router模块
import Vue from 'vue'
import Router from 'vue-router'

// 2. 全局注册路由系统
// 正是因为这里全局注册了, 所有在每一个Vue组件中可以使用$router和$route
Vue.use(Router)

// 3. 引入项目的主体架子
import Layout from '@/layout'

// 4. 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

/**
 * asyncRoutes
 * 动态路由规则数组
 * 动态路由(需要权限才可以访问的) 我们这里准备一个数组存放
 */
export const asyncRoutes = [
  departmentsRouter,
  approvalsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter
]

/**
 * constantRoutes
 * 静态路由规则数组
 * 后期在这里面配置的所有路由, 都不需要做权限控制
 */
export const constantRoutes = [
  // 一级路由
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  // 一级路由
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // 主页面模块
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      // 二级路由
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 临时方案: 为了更好地看到效果，我们可以先将静态路由和动态路由进行合并, 也就是默认开放所有路由权限
  routes: [
    ...constantRoutes,
    ...asyncRoutes
  ]
})

const router = createRouter()

// 路由重置
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

// router.beforeEach((to, from, next) => {
//   console.log('到哪里去', to)
//   console.log('从哪里开', from)
//   // 放行
//   next()
// })

export default router

// ------------------之前使用路由的方式--------------------------

// 之前使用路由的方式
// 1) 普通写法
// import Login from '@/views/login/index.vue'
// const router = new Router({
//    routes: [
//      {path: '/login', component: Login}
//    ]
// })
// export default router

// 2) 高频写法  把路由规则数组抽离出来
// 为什么?
// 因为在很多项目中要拿到这个数组做一些业务处理, 比如: 菜单的展示...

// import Login from '@/views/login/index.vue'
// export const routes = [
//   { path: '/login', component: Login }
// ]
// const router = new Router({
//   routes
// })
// export default router

// 在路由中, 引入组件的方式有两种: 1) 静态引入(直接加载)  2) 动态引入(路由懒加载)
// 1) 静态引入(直接加载)
// 特点: 无论当前组件要不要立马在页面中展示, 项目一启动就会加载
// import Login from '@/views/login/index.vue'
// const routes = [
//   { path: '/login', component: Login }
// ]

// 2) 动态引入(路由懒加载)
// 特点: 项目启动的时候不会加载, 只有在页面中要展示该组件的时候, 才会去加载
// const routes = [
//   { path: '/login', component: () => import('@/views/login/index.vue') }
// ]

// 两种引入方式, 第一次引入后都会缓存
// 如何选择?
// a. 如果该组件首屏展示就需要用到, 比如: 主框架Layout, 则直接加载
// b. 如果该组件首屏展示不会用到, 则用懒加载, 用到的时候再加载即可
// 目的: 尽可以缩短首屏渲染时间, 提升用户体验 (一开始加载的东西越多, 首屏渲染时间就越长)
